<template>
    <el-card>
        <el-row :gutter="20" class="header">
            <el-col :span="5">
                <el-input size="large" placeholder="分类名" clearable v-model="ListDto.name"></el-input>
            </el-col>
            <el-button size="large" @click="initCategoryList" :icon="'Search'" type="primary">搜索</el-button>
            <el-button size="large" @click="handleDialogValue" :icon="'Plus'" type="primary">新增</el-button>
        </el-row>

        <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column fixed prop="id" label="id" width="140" />

            <el-table-column prop="name" label="分类名" />
            <el-table-column prop="remark" label="描述" />
            <el-table-column prop="status" label="状态">
                <template v-slot="scoped">
                    <el-switch v-model="scoped.row.status" class="ml-2" :active-value="0" :inactive-value="1"
                        @change="changeStatus(scoped.row)"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </template>
            </el-table-column>

            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column fixed="right" label="Operations" min-width="200">
                <template v-slot="scoped">
                    <el-button size="large" @click="handleEdit(scoped.row)" type="primary" :icon="'Edit'" circle />
                    <el-button size="large" type="danger" :icon="'Delete'" circle />
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="ListDto.pageNum" v-model:page-size="ListDto.pageSize"
            :page-sizes="[1, 3, 5, 30]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>

    <Dialog @initCategoryList="initCategoryList" v-if="dialogVisible" @update:modelValue="changeDialog" :id="id"
        :categoryValue="categoryValue" :dialogVisible="dialogVisible" :title="title">

    </Dialog>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { categoryListAPI, updateCategoryAPI } from '@/api/index.js'
import Dialog from '@/components/Category/Dialog.vue';
import { ElMessage } from 'element-plus'

const ListDto = reactive({
    pageSize: 10,
    pageNum: 1,
    name: '',
    status: '',
})

const categoryValue = ref();

let total = ref(0)

let tableData = ref([])

const initCategoryList = async () => {
    let res = await categoryListAPI(ListDto)
    tableData.value = res.rows
    total.value = Number(res.total)
}

const handleSizeChange = (val) => {
    ListDto.pageSize = val
    initCategoryList()
}

const handleCurrentChange = (val) => {
    ListDto.pageNum = val
    initCategoryList()
}

const changeStatus = async (val) => {

    const res = await updateCategoryAPI(val)
    console.log("[=p=p]", res)
    if (res != false) {
        ElMessage.success("更新成功")
    }
}

const dialogVisible = ref(false)

const changeDialog = () => {
    dialogVisible.value = false
}

const title = ref('')
const id = ref(-1)

const handleDialogValue = () => {
    title.value = "添加类别"
    id.value = -1
    categoryValue.value = {}
    dialogVisible.value = true
}

const handleEdit = (val) => {
    title.value = "编辑信息"
    id.value = val.id
    categoryValue.value = val
    dialogVisible.value = true
}
initCategoryList()
</script>

<style scoped lang="scss"></style>